<template>
  <div id="index">
    <div>
      <el-input
        class="edge"
        style="width:180px"
        size="mini"
        placeholder="标题,内容"
        prefix-icon="el-icon-search"
        v-model="keyword"
      ></el-input>

      <!-- 发布状态 -->
      <el-select
        class="edge"
        style="width:180px"
        clearable
        size="mini"
        v-model="choose"
        placeholder="发布状态"
      >
        <el-option v-for="item in module" :key="item.value" :label="item.value" :value="item.code"></el-option>
      </el-select>
      <!-- 时间 -->
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="startTime"
        type="date"
        placeholder="开始时间"
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="endTime"
        type="date"
        placeholder="结束时间"
      ></el-date-picker>
      <!-- 确定 -->
      <el-button style="margin-left:10px" size="mini" type="primary" @click="next">确认</el-button>
      <el-button style="margin-left:10px" size="mini" @click="reset">重置</el-button>
      <el-button @click="pushend" style="margin-left:10px" size="mini">添加</el-button>
    </div>

    <!-- 列表 -->
    <el-table border size="mini" :data="tableData" style="width: 100%;margin-top:20px" :header-cell-style="{background:'#ccc'}">
      <el-table-column prop="statusName" label="状态" width="180"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="createTime" label="发布时间"></el-table-column>
      <el-table-column prop="updateBy" label="修改人"></el-table-column>
      <el-table-column prop="createTime" label="修改时间"></el-table-column>

      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button @click="end(scope.row)" size="mini" type="primary">详情</el-button>
          <el-button @click="withdraw(scope.row)" size="mini">撤回</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="text-align:right;margin-top:20px">
      <el-pagination
        size="mini"
        class="pageNumage"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 详情弹框 -->
    <el-dialog title="详情" :visible.sync="addShow" width="600px" :before-close="cancel">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="状态">
          <span>{{JSONdate.statusName}}</span>
        </el-form-item>
        <el-form-item label="标题">
          <span>{{JSONdate.title}}</span>
        </el-form-item>
        <el-form-item label="内容">
          <span>{{JSONdate.content}}</span>
        </el-form-item>
        <el-form-item label="时间">
          <span>{{JSONdate.createTime}}</span>
        </el-form-item>
        <el-form-item label="修改人">
          <span>{{JSONdate.updateBy}}</span>
        </el-form-item>
      </el-form>

      <!-- 确定 -->
      <div class="elbutton">
        <el-button @click="cancel" size="mini" type="primary">确认</el-button>
      </div>
    </el-dialog>

    <!-- 推送弹框 -->
    <el-dialog title="添加" :visible.sync="pushShow" width="400px" :before-close="cancel">
      <!-- 标题： -->
      <div class="title">
        <div>标题：</div>
        <el-input style="width:300px" v-model="title" placeholder="请输入标题"></el-input>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div>内容：</div>
        <el-input
          style="width:300px"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="content"
        ></el-input>
      </div>
      <!-- 确定 -->
      <div class="elbutton">
        <el-button @click="determine" size="mini" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import {
  announcement,
  statusan,
  add,
  acquaintances,
  dateStatus
} from "@/api/user";
import qs from "qs";
export default {
  name: "index",
  data() {
    return {
      keyword: "",
      startTime: "",
      endTime: "",
      choose: "", //发布状态
      module: [],
      tableData: [],
      total: 1,
      addShow: false,
      pushShow: false,
      title: "",
      content: "",
      pageNum: 1,
      id: "",
      JSONdate: [],
      status: ""
    };
  },
  created() {
    this.management();
    this.shape();
  },
  methods: {
    // 公告管理列表
    management() {
      let data = qs.stringify({
        pageNum: this.pageNum,
        pageSize: 10,
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime
      });
      announcement(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 公告状态
    shape() {
      let data = qs.stringify({});
      statusan(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.module = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    // 添加公告
    determine() {
      let data = qs.stringify({
        title: this.title,
        content: this.content
      });
      add(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.pushShow = false;
          this.management();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    next() {
      this.management();
    },
    // 重置
    reset() {
      (this.keyword = ""), (this.startTime = ""), (this.endTime = "");
    },
    // 确定
    cancel() {
      (this.addShow = false), (this.pushShow = false);
    },
    cancel() {
      this.$message({
        type: "info",
        message: "取消推送"
      });
      (this.addShow = false), (this.pushShow = false);
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.management();
    },
    // 详情弹框接口
    end(row) {
      this.id = row.id;
      let data = qs.stringify({
        id: this.id
      });
      acquaintances(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.addShow = true;
          this.JSONdate = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 修改状态
    withdraw(row) {
      this.id = row.id;
      this.status = row.status;
      let data = qs.stringify({
        id: this.id,
        status: this.status
      });
      dateStatus(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.management();
          this.$message.error("修改成功");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 推送
    pushend() {
      this.pushShow = true;
    }
  }
};
</script>
<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
#index {
  margin-top: 20px;
  margin-left: 20px;
}
.title {
  display: flex;
  div:nth-child(1) {
    margin-top: 10px;
  }
}
.content {
  display: flex;
  margin-top: 20px;
  div:nth-child(1) {
    margin-top: 10px;
  }
}
.elbutton {
  margin-top: 20px;
}
</style>